import { ArrowRight, Mail, MessageCircle, Phone } from "lucide-react";
import { Link } from "react-router";

export default function AppFooter() {
  return (
    <footer className="bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 text-white relative overflow-hidden">
      {/* Background Pattern */}
      <div className="absolute inset-0 opacity-10">
        <div className="absolute top-10 left-10 w-32 h-32 bg-white rounded-full mix-blend-overlay"></div>
        <div className="absolute bottom-10 right-10 w-48 h-48 bg-blue-400 rounded-full mix-blend-overlay"></div>
        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-purple-400 rounded-full mix-blend-overlay"></div>
      </div>

      <div className="relative z-10">
        {/* Main Footer Content */}
        <div className="container mx-auto px-8 py-16">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {/* Company Section */}
            <div className="space-y-4 animate-fade-in">
              <div className="flex items-center gap-3 mb-6">
                <div className="w-10 h-10 bg-gradient-primary rounded-xl flex items-center justify-center">
                  <span className="text-white font-bold text-lg">P</span>
                </div>
                <span className="text-2xl font-bold">Paimon</span>
              </div>
              <h3 className="text-lg font-semibold mb-4">公司</h3>
              <nav className="flex flex-col space-y-3">
                <Link
                  to="/"
                  className="text-gray-300 hover:text-white transition-colors duration-200 flex items-center gap-2 group"
                >
                  <ArrowRight className="h-4 w-4 group-hover:translate-x-1 transition-transform duration-200" />
                  关于我们
                </Link>
                <Link
                  to="/"
                  className="text-gray-300 hover:text-white transition-colors duration-200 flex items-center gap-2 group"
                >
                  <ArrowRight className="h-4 w-4 group-hover:translate-x-1 transition-transform duration-200" />
                  就业机会
                </Link>
                <Link
                  to="/"
                  className="text-gray-300 hover:text-white transition-colors duration-200 flex items-center gap-2 group"
                >
                  <ArrowRight className="h-4 w-4 group-hover:translate-x-1 transition-transform duration-200" />
                  团队
                </Link>
                <Link
                  to="/"
                  className="text-gray-300 hover:text-white transition-colors duration-200 flex items-center gap-2 group"
                >
                  <ArrowRight className="h-4 w-4 group-hover:translate-x-1 transition-transform duration-200" />
                  博客
                </Link>
              </nav>
            </div>

            {/* Products Section */}
            <div className="space-y-4 animate-fade-in" style={{ animationDelay: "0.1s" }}>
              <h3 className="text-lg font-semibold mb-4">产品</h3>
              <nav className="flex flex-col space-y-3">
                <Link
                  to="/"
                  className="text-gray-300 hover:text-white transition-colors duration-200 flex items-center gap-2 group"
                >
                  <ArrowRight className="h-4 w-4 group-hover:translate-x-1 transition-transform duration-200" />
                  产品列表
                </Link>
                <Link
                  to="/"
                  className="text-gray-300 hover:text-white transition-colors duration-200 flex items-center gap-2 group"
                >
                  <ArrowRight className="h-4 w-4 group-hover:translate-x-1 transition-transform duration-200" />
                  产品定价
                </Link>
                <Link
                  to="/"
                  className="text-gray-300 hover:text-white transition-colors duration-200 flex items-center gap-2 group"
                >
                  <ArrowRight className="h-4 w-4 group-hover:translate-x-1 transition-transform duration-200" />
                  新功能
                </Link>
                <Link
                  to="/"
                  className="text-gray-300 hover:text-white transition-colors duration-200 flex items-center gap-2 group"
                >
                  <ArrowRight className="h-4 w-4 group-hover:translate-x-1 transition-transform duration-200" />
                  API
                </Link>
              </nav>
            </div>

            {/* Legal Section */}
            <div className="space-y-4 animate-fade-in" style={{ animationDelay: "0.2s" }}>
              <h3 className="text-lg font-semibold mb-4">法律</h3>
              <nav className="flex flex-col space-y-3">
                <Link
                  to="/"
                  className="text-gray-300 hover:text-white transition-colors duration-200 flex items-center gap-2 group"
                >
                  <ArrowRight className="h-4 w-4 group-hover:translate-x-1 transition-transform duration-200" />
                  隐私政策
                </Link>
                <Link
                  to="/"
                  className="text-gray-300 hover:text-white transition-colors duration-200 flex items-center gap-2 group"
                >
                  <ArrowRight className="h-4 w-4 group-hover:translate-x-1 transition-transform duration-200" />
                  条款和条件
                </Link>
                <Link
                  to="/"
                  className="text-gray-300 hover:text-white transition-colors duration-200 flex items-center gap-2 group"
                >
                  <ArrowRight className="h-4 w-4 group-hover:translate-x-1 transition-transform duration-200" />
                  退款政策
                </Link>
              </nav>
            </div>

            {/* Contact Section */}
            <div className="space-y-4 animate-fade-in" style={{ animationDelay: "0.3s" }}>
              <h3 className="text-lg font-semibold mb-4">联系我们</h3>
              <nav className="flex flex-col space-y-3">
                <Link
                  to="/"
                  className="text-gray-300 hover:text-white transition-colors duration-200 flex items-center gap-2 group"
                >
                  <Mail className="h-4 w-4" />
                  邮箱支持
                </Link>
                <Link
                  to="/"
                  className="text-gray-300 hover:text-white transition-colors duration-200 flex items-center gap-2 group"
                >
                  <Phone className="h-4 w-4" />
                  电话支持
                </Link>
                <Link
                  to="/"
                  className="text-gray-300 hover:text-white transition-colors duration-200 flex items-center gap-2 group"
                >
                  <MessageCircle className="h-4 w-4" />
                  在线聊天
                </Link>
              </nav>

              {/* Social Media */}
              <div className="mt-6">
                <p className="text-sm text-gray-400 mb-3">关注我们</p>
                <div className="flex space-x-3">
                  <button
                    type="button"
                    className="w-10 h-10 bg-gray-700 hover:bg-blue-600 rounded-lg flex items-center justify-center transition-colors duration-200"
                  >
                    <MessageCircle className="h-5 w-5" />
                  </button>
                  <button
                    type="button"
                    className="w-10 h-10 bg-gray-700 hover:bg-red-600 rounded-lg flex items-center justify-center transition-colors duration-200"
                  >
                    <Mail className="h-5 w-5" />
                  </button>
                  <button
                    type="button"
                    className="w-10 h-10 bg-gray-700 hover:bg-green-600 rounded-lg flex items-center justify-center transition-colors duration-200"
                  >
                    <Phone className="h-5 w-5" />
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Bottom Bar */}
        <div className="border-t border-gray-700">
          <div className="container mx-auto px-8 py-6">
            <div className="flex flex-col md:flex-row justify-between items-center">
              <p className="text-gray-400 text-sm">© 2024 Paimon. 保留所有权利。</p>
              <p className="text-gray-400 text-sm mt-2 md:mt-0">
                由 <span className="text-white font-medium">Paimon Team</span> 精心打造
              </p>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}
